<template>
    <div class="main">
        <van-sidebar
                v-model="siderbarActiveNum"
                class="sidebar" >
            <van-sidebar-item
                    v-for="category in categoryList"
                    :title="category.categoryName"
                    :key="category.cid"
                    @click="changeCategory(category.cid)"
            />
            <!--占位-->
            <div class="occupation"></div>
        </van-sidebar>
        <!--展示商品盒子-->
        <div class="showDishes">
            <Dish v-for="dish in dishList" :dish="dish"></Dish>
            <!--占位-->
            <div class="occupation"></div>
        </div>

    </div>
</template>

<script>
import Dish from "../components/Dish";

export default {
        name: "Commodity",
        data(){
            return{
                siderbarActiveNum:0,
                categoryList:[],
                dishList:[]
            }
        },
        components:{
           Dish
        },
        computed:{
            userID(){
               return  sessionStorage.getItem("userID");
            }
        },
        methods:{
            //切换侧边栏时调用
            changeCategory(cid){
                this.getDishList(cid)
            },
            //获取所有分分类信息
           async getCategoryList(){
               const {data:res}=await this.$http.get("/category/findCategorys")
                if (res.status!=200)
                    return this.$notify( {type: 'danger', message: '查询菜品分类失败' });
                this.categoryList=res.data;
                this.getDishList(this.categoryList[0].cid)
            },
            //根据菜品分类id查询菜品信息
           async getDishList(cid){
               const{data:res}=await this.$http.get("/dish/findDishesByCid",
                   {params:{cid:cid,uid:this.userID}});
               if (res.status!=200)return this.$notify({type:"danger",message:"查询分类菜品失败"});
               this.dishList=res.data;
            }
        },
        created() {
            this.getCategoryList();
        }
    }
</script>

<style scoped>
    .main{
        width: 100%;
    }
    .occupation{
        width: 100%;
        height: 45px;

    }
    .sidebar{
        width: 24%;
        float: left;
    }
    .showDishes{
        width: 76%;
        float: left;

    }
</style>
